<template>
  <view>
    <view class="w100 pl-30 pr-30">
      <view class="w100 bgff pr-24 mb-20 mt-20 pl-20 pr-20 pt-10 pb-10 br-20">
        <view class="rows rowsm mb-10">
          <!-- <view class="title" style="width:20%;">问答类型：</view> -->
          <!-- <scroll-view scroll-x="true" style="white-space: nowrap;"> -->
            <view class="rows rowsm h100" style="flex-wrap: wrap;">
              <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20 mt-10 mb-10" style="" v-for="(item, index) in taskType"
                :key="index"
                :style="active2 == taskType[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
                @click="handelType(index)">{{ item.name }}</view>
            </view>
          <!-- </scroll-view> -->
        </view>
        <view class="rowsb rowsm mb-20 mt-10">
          <!-- <view class="title">试卷状态：</view> -->
          <scroll-view scroll-x="true" style="white-space: nowrap;">
            <view class="rows rowsm h100">
              <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style="" v-for="(item, index) in taskTab"
                :key="index"
                :style="active == taskTab[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
                @click="handelTab(index)">{{ item.name }}</view>
            </view>
          </scroll-view>
        </view>
        <view class="rows rowsm mb-20">
          <view class="title" style="width:20%;">发布时间：</view>
          <uni-datetime-picker v-model="range" type="daterange" start-placeholder="起始日期" end-placeholder="截至日期"
            @change="changeTime" />
        </view>

        <view class="rows rowsm mb-20">
          <view class="title" style="width:20%;">试卷名称：</view>
          <u--input placeholder="请输入内容" border="surround" v-model="value" size="mini" @change="getList"></u--input>
          <!-- <view class="btnWarp">
            <u-button class="btn" type="primary" shape="circle" @click="getList()">搜索</u-button>
            <u-button type="primary" :plain="true" shape="circle" @click="handelReset">重置</u-button>
          </view> -->
        </view>
      </view>
      <!-- <view class="points w100 bgff pr-24 mt-20 mb-20">获得积分数：100</view> -->
      <view class="content-warp">
        <view class="add mb-30" @click="addTask"
          v-if="permissions.find(v => v == '*:*:*') || permissions.find(v => v == 'project:paper:generatePaper')">+新增组卷
        </view>
        <view class="item-warp" v-for="item in itemList" :key="item.id" @click.stop="goPage(item)">
          <view class="txt-warp">
            <text class="fs-28 fw-600 requirement">{{ item.name }}</text>
            <view class="txt-warp">
              <view @click.stop="publishBtn(item.id)" class="btn" style="color: #5ac725; border-color: #5ac725"
                v-if="item.status == 0 && (permissions.find(v => v == '*:*:*') || permissions.find(v => v == 'project:paper:publish'))">
                发布</view>
              <view @click.stop="completionBtn(item)" class="btn" style="color: #5ac725; border-color: #5ac725"
                v-if="item.status != 0 && (permissions.find(v => v == '*:*:*') || permissions.find(v => v == 'project:paper:performanceXy'))">
                完成情况
              </view>
              <view @click.stop="withdrawBtn(item)" class="btn ml-15" style="color: #fe6c6c; border-color: #fe6c6c"
                v-if="item.status != 0 && (permissions.find(v => v == '*:*:*') || permissions.find(v => v == 'project:paper:withdraw'))">
                撤回</view>
              <view @click.stop="deletBtn(item)" class="btn ml-15" style="color: #fe6c6c; border-color: #fe6c6c"
                v-if="item.status == 0 && (permissions.find(v => v == '*:*:*') || permissions.find(v => v == 'project:paper:remove'))">
                删除</view>
            </view>
          </view>

          <view class="rows rowsm rowsb fs-24 mt-10 mb-10">
            <view>
              <text class="fs-26 fw-600"> 实践课程：</text>
              {{ (taskType.find(v => v.value == item.practiceType) || {}).name }}
            </view>
            <view>
              <text class="fs-26 fw-600"> 积分上限：</text>
              {{ item.score }}
            </view>
          </view>
          <view class="rows rowsm rowsb fs-24 mb-10">
            <view>
              <!-- <text class="fs-26 fw-600"> 发 布 人：</text>
              {{ item.createUserName }}({{ item.jsNumber }}) -->

              <text class="fw-600 fs-26"> {{ item.status != '0' ? '发 布 人：' : '创 建 人:' }}</text>
              <text class="stateEllipsis">
                {{ item.status != '0' ? item.releaseByName : item.createUserName }}({{ item.status != '0' ?
                  item.releaseJsNumber : item.jsNumber }})
              </text>
            </view>
            <view>
              <text class="fs-26 fw-600"> 任务状态：</text>
              {{ (taskTab.find(v => v.value == item.status + 1) || {}).name }}
            </view>
          </view>
          <view class="rows rowsm rowsb fs-24 mb-10">
            <view>
              <text class="fs-26 fw-600"> 考试时间：</text>
              {{ item.startTime.slice(0, 10) }} ~ {{ item.endTime.slice(0, 10) }}
            </view>
          </view>
          <view class="rows rowsm rowsb fs-24 mb-10">
            <view>
              <text class="fs-26 fw-600"> 发布时间：</text>
              {{ (item.releaseTime || '').slice(0, 16) }}
            </view>
          </view>
        </view>
      </view>

      <view v-if="itemList.length == 0" class="notYet">
        暂无数据
      </view>

    </view>
  </view>
</template>

<script>
import { Base64 } from 'js-base64';
export default {
  data() {
    return {
      value: '',
      active: 0,
      active2: 0,
      title: '',
      range: [],
      taskTab: [
        { name: '全部', value: 0 },
        { name: '未发布', value: 1 },
        { name: '未开始', value: 2 },
        { name: '进行中', value: 3 },
        { name: '已结束', value: 4 },
      ],
      taskType: [
        { name: '全部', value: 0 },
      ],
      itemList: [],
      limit: {
        pageNum: 1,
        pageSize: 10,
      },
      permissList: [],
      permissions: [],
    };
  },
  onLoad(e) {
    if (uni.getStorageSync('flag') == 'teacher') {
      this.$tools.axiosFromToken('POST', 'sysUser/getById', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
				let getAllInfo = { ...res.data, user: JSON.parse(Base64.decode(res.data.user)) }
        uni.setStorageSync('getInfo', getAllInfo);
        this.permissions = res.data.permissions.flat() || [];
      })
    }
    this.getTypeCongfigList();
    // this.permissList = uni.getStorageSync('getInfo').practiceTypes;
    // // this.permissions = uni.getStorageSync('getInfo').permissions.flat() || [];
    // const typeMap = {
    //   1: { name: '劳动教育', value: 1 },
    //   2: { name: '职业素养', value: 2 },
    //   3: { name: '应急安全', value: 3 },
    //   4: { name: '思政实践', value: 4 },
    //   5: { name: '创新创业', value: 5 }
    // };

    // this.permissList.forEach(v => {
    //   if (typeMap[v]) {
    //     this.taskType.push(typeMap[v]);
    //   }
    // });
  },
  onShow() {
    this.getList();
  },
  // 下拉到底部后加载新数据
  onReachBottom() {
    if (this.itemList.length < this.total) {
      this.limit.pageNum++;
      this.getList();
    }
  },
  methods: {
    getTypeCongfigList() {
      this.$tools.axiosFromToken('GET', 'project/practice/type/config/list?pageNum=1&pageSize=50', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        res.rows.forEach(item => {
          this.taskType.push({ name: item.name, value: item.id })
        })
      })
    },
    handelTab(index) {
      this.limit.pageNum = 1;
      this.active = this.taskTab[index].value;
      this.getList();
    },
    handelType(index) {
      this.limit.pageNum = 1;
      this.active2 = this.taskType[index].value;
      this.getList();
    },
    getList() {
      const data = {
        practiceType: this.active2 > 0 ? this.active2 : '',
        name: this.value,
        status: this.active === 0 ? null : this.active - 1,
        createTimeSort: 'desc',
        startTime: this.range.length > 0 ? this.range[0] + ' 00:00:00' : null,
        endTime: this.range.length > 0 ? this.range[1] + ' 23:59:59' : null,
      };
      this.$tools.axiosFromToken('GET', `project/paper/listTeacher?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}&isAnswer=2`, data, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg);
        this.total = res.total;
        if (this.limit.pageNum == 1) {
          this.itemList = res.rows;
        } else {
          this.itemList = [...this.itemList, ...res.rows];
        }

        this.$forceUpdate();
      })
    },
    deletBtn(row) {
      uni.showModal({
        title: '确认删除',
        content: `是否删除"${row.name}"的试卷,删除后学生无法查看试卷`,
        success: (res) => {
          if (res.confirm) {
            this.$tools.axiosFromToken('DELETE', `project/paper/${row.id}`, {}, '加载中').then(res => {
              if (res.code != 200) return this.$tools.showtt(res.msg);
              setTimeout(() => {
                this.$tools.showtt('删除成功');
              }, 200);
              this.itemList = [];
              this.limit.pageNum = 1;
              this.getList();
            })
          } else if (res.cancel) {
            // 用户点击了“取消”
            console.log('取消删除');
          }
        }
      });
    },
    publishBtn(id) {
      this.$tools.axiosFromToken('PUT', `project/paper`, { status: 1, id }, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg);
        setTimeout(() => {
          this.$tools.showtt('发布成功');
        }, 200);
        this.itemList = [];
        this.limit.pageNum = 1;
        this.getList();
      })
    },
    withdrawBtn(row) {
      uni.showModal({
        title: '确认撤回',
        content: `是否撤回"${row.name}"的试卷,撤回后学生无法查看试卷`,
        success: (res) => {
          if (res.confirm) {
            this.$tools.axiosFromToken('PUT', `project/paper`, { status: 0, id: row.id }, '加载中').then(res => {
              if (res.code != 200) return this.$tools.showtt(res.msg);
              setTimeout(() => {
                this.$tools.showtt('撤回成功');
              }, 200);
              this.itemList = [];
              this.limit.pageNum = 1;
              this.getList();
            })
          } else if (res.cancel) {
            // 用户点击了“取消”
            console.log('取消撤回');
          }
        }
      });
    },
    completionBtn(item) {
      this.$tools.goNext(`/teacher/trivia/taskDetail?item=${JSON.stringify(item)}`)
    },
    goPage(item) {
      // if (item.status == 2 || item.status == 3) {
      if (item.status != 0) {
        this.$tools.goNext(`/teacher/trivia/analyze?item=${JSON.stringify(item)}`)
      } else {
        this.$tools.goNext(`/teacher/trivia/editAnalyze?item=${JSON.stringify(item)}`)
      }
      // }
      // else if (item.status == 1) {
      //     this.$tools.goNext(`/teacher/trivia/taskDetail?item=${JSON.stringify(item)}`)
      //   }
    },
    changeTime(e) {
      console.log(e);
      this.limit.pageNum = 1;
      this.range = e.length > 0 ? e : [];
      this.getList();
    },
    handelReset() {
      this.limit.pageNum = 1;
      this.value = '';
      this.range = [];
      this.active = 0;
      this.active2 = 0;
      this.getList();
    },
    addTask() {
      this.$tools.goNext(`/teacher/trivia/examinationPaper`)
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f5f7;
  padding-bottom: 10rpx;

  ::v-deep .u-input {
    padding: 3px !important;
  }

  ::v-deep .uni-date__x-input {
    height: auto !important;
    padding: 5px !important;
  }
}

.mark {
  text-align: right;
  color: #f92929;
}

.add {
  width: 85px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  background: #658dec;
  color: #fff;
  border-radius: 34px;
  font-size: 15px;
}

.title {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
  // width: 300rpx;
  white-space: nowrap;
}

.title2 {
  color: #333;
  font-size: 28rpx;
}

.btnWarp {
  width: 140px;
  height: 49px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .u-button.data-v-2bf0e569 {
    height: 30px !important;
    margin-left: 10px;
  }

}

.content-warp {
  color: #333;
  font-size: 24rpx;

  .item-warp {
    padding: 24rpx;
    width: 100%;
    // background: rgb(250, 242, 242);
    background: #fff;
    border-radius: 10px;
    margin-bottom: 30rpx;

    .requirement {
      width: 60%;
      // 溢出显示省略号
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .btn {
      font-size: 26rpx;
      border: 1px solid;
      padding: 5px 10px;
      border-radius: 20px;
      background: #fff;
    }
  }

  .txt-warp {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 30rpx;
      font-weight: bold;
    }
  }
}

.points {
  text-align: right;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

::v-deep .uni-date {
  .uni-date__icon-clear {
    top: -4px;
    right: -6px;
  }
}

.notYet {
  margin-top: 50rpx;
  width: 100%;
  text-align: center;
  font-weight: 0 !important;
  font-size: 42rpx;
}
</style>
